<!--
固定定位
    position: fixed;
        - 固定在浏览器可视区
        - 应用场景：侧边小广告、返回顶部的侧边栏栏、顶部固定的导航栏
        
特点
    1）参照点是浏览器可视区
        - 不随页面滚动而滚动
        - 跟祖先元素无关
    2）脱标，不占用原来位置
        - 可将固定定位当做一种特殊的绝对定位（类比：正方形是一种特殊的矩形）

应用：跟随版心
    固定在：版心右侧
        - 先→→：可视区的一半
            left: 50%;
        - 再→→：版心的一半
            margin-left: 数值;
    固定在：可视区（页面）中央
        - 先→→：可视区的一半
            left: 50%;
        - 再←←：固定元素的一半
            margin-left: -数值;    // 负值：反方向。注意：margin-right无效！
注意：
    - 横向距离偏移
    - 视觉效果是以元素左边缘为主，或者说是以元素左上角那个点为主
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 500px;
        height: 1500px;
        margin: 0 auto;
        background: cyan;
    }
    .box img {
        position: fixed;
        top: 100px;
        /* 往右：可视区的一半 */
        left: 50%;

        /* 往右：版心的一半 */
        margin-left: 250px;

        /* 往左：固定元素的一半 */
        /* margin-left: -72.5px; */
    }
</style>

<div class="main"></div>
<div class="box">
    <img src="./resources/pictures/dj.png" alt="妲己">
</div>